<template>
  <!-- 主要首页头部 -->
  <div class="menu-comp">
    <div class="logo-container">
      <div class="logo"></div>
      <span>{{ $store.state.title }}</span>
    </div>
    <el-menu
      :default-active="activeIndex"
      class="menu-comp-container"
      mode="horizontal"
      @select="handleSelect"
    >
      <template v-for="(item, index) in currentMenuList">
        <template v-if="!item.hide">
          <el-submenu
            popper-class="menu-popper-custom"
            v-if="item.children && item.children.length"
            :index="item.id"
            :key="`${item.id + index}`"
          >
            <template slot="title">
              <i v-if="item.icon" :class="['iconfont', item.icon]">{{
                setIcon(item.icon)
              }}</i>
              <span slot="title">{{ item.name }}</span>
            </template>
            <el-menu-item
              v-for="child in item.children"
              :index="child.id"
              :key="child.id"
            >
              <span>{{ child.name }}</span>
            </el-menu-item>
          </el-submenu>
          <el-menu-item v-else :index="item.id" :key="`${item.id + index}`">
            <span>{{ item.name }}</span>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
    <div class="user-info">
      <div class="corpName">浙江华东工程建设管理有限公司</div>
      <span class="line">|</span>
      <!--      <div class="message">-->
      <!--        <i class="iconfont iconxiaoxi" title="消息中心" @click="$router.push('/message/manage')">-->
      <!--          <span v-if="count">{{ count > 99 ? '99+' : count }}</span>-->
      <!--        </i>-->
      <!--      </div>-->
      <span class="line">|</span>
      <div class="user-item user-item-name">
        <i class="iconfont iconyonghuming"></i>
        <span class="user-name" :title="userName">{{ userName }}</span>
      </div>
      <el-dropdown @command="handleCommand">
        <div class="user-item">
          <i class="iconfont iconyonghu"></i>
          <span>个人档案</span>
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="visible">
            <i class="iconfont iconxiugaimima"></i>
            <span>修改账号</span>
          </el-dropdown-item>
          <el-dropdown-item command="signOut">
            <i class="iconfont icontuichu"></i>
            <span>退出登录</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <set-password
      :visible="visible"
      :loading="loading"
      @cancel="visible = false"
      @submit="handleSave"
    >
    </set-password>
  </div>
</template>

<script>
import SetPassword from "@/components/menu/SetPassword";

export default {
  name: "mainMenuComp",
  components: {
    SetPassword
  },
  props: {
    menuOptions: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      activeIndex: "/",
      count: 0,
      visible: false,
      loading: false,
      menus: [
        {
          id: "/",
          name: "门户"
        },
        {
          id: "/personal-center",
          name: "个人中心"
        },
        {
          id: "/",
          name: "系统管理",
          children: [
            {
              id: "/organization",
              name: "组织机构"
            },
            {
              id: "/project-manage",
              name: "项目管理"
            },
            {
              id: "/user",
              name: "用户管理"
            },
            {
              id: "/roles",
              name: "角色管理"
            },
            {
              id: "/menu",
              name: "菜单管理"
            }
          ]
        }
      ]
    };
  },
  computed: {
    // 当前展示的菜单
    currentMenuList() {
      const pages = this.$store.state.pageRoles;
      return this.menus.filter(({ id }) => {
        if (id === "/") return true;
        return pages.some(({ path, hide }) => path === id && !hide);
      });
    },
    // 用户名
    userName() {
      return this.$store.state.userInfo.userName;
    }
  },
  watch: {
    // 设置初始选中路由
    $route: {
      immediate: true,
      handler: function(val, oldVal) {
        const currentPath = val.path;
        const oldPath = oldVal && oldVal.path;
        if (currentPath !== oldPath) {
          // 菜单匹配当前路由
          const hasPath = (list, path) => {
            if (!Array.isArray(list)) return;
            const currentItem = list.find(item => {
              if (item.id === path) return true;
              const reg = new RegExp(`^${item.id}`, "g");
              return item.id !== "/" && reg.test(currentPath);
            });
            if (currentItem) return currentItem.id;
            return "";
          };
          const path = hasPath(this.currentMenuList, currentPath);
          if (path) this.activeIndex = path;
        }
      }
    }
  },
  created() {
    this.getIconList();
  },
  methods: {
    // 获取icon图标
    getIconList() {
      try {
        /* eslint-disable */
        this.$axios.get(this.$configs.iconJson).then(res => {
          if (res && res.status === 200 && res.data) {
            const glyphs = res.data.glyphs || [];
            this.iconList = glyphs.map(item => ({
              ...item,
              iconStr: eval("'" + `\\u${item.unicode}` + "'")
            }));
          }
        });
      } catch (e) {}
    },
    // 设置icon图标
    setIcon(iconId) {
      const item = this.iconList.find(v => v.icon_id === iconId);
      return item ? item.iconStr : "";
    },
    /**
     * 切换菜单
     * @param key: 当前菜单对应路由
     */
    handleSelect(key) {
      if (this.$route.path !== key) {
        this.activeIndex = key;
        this.$router.push(key);
      }
    },
    handleCommand(type) {
      if (type === "visible") {
        this.visible = true;
        return;
      }
      this[type]();
    },
    // 修改帐号信息
    async handleSave(data) {
      this.loading = true;
      const { success } = await this.$Model.updatePassword(data);
      this.loading = false;
      if (success) {
        this.$message.success("修改成功");
        this.$store.commit("clearUserInfo");
        this.$router.push("/login");
      }
    },
    /**
     * 退出登录
     */
    async signOut() {
      const { userId } = this.$store.state.userInfo;
      const { success } = await this.$Model.logout({
        user_id: userId
      });
      if (success) {
        this.$message.success("退出成功");
        this.$store.commit("clearUserInfo");
        this.$router.push("/login");
      }
    }
  }
};
</script>

<style scoped lang="scss">
@import "../../assets/styles/main";

.menu-comp {
  width: 100%;
  height: 78px;
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
  background: $baseBg;
  z-index: 10;
  .logo-container {
    left: 30px;
    position: absolute;
    display: flex;
    align-items: center;
    .logo {
      width: 50px;
      height: 50px;
      background: url("../../assets/images/logo_menu.png") no-repeat center;
      background-size: cover;
    }
    span {
      margin-left: 10px;
      font-size: 30px;
      font-weight: bold;
      color: #fff;
    }
  }
  .menu-comp-container {
    float: left;
    background: transparent;
    border: none;
  }
  /deep/ .menu-comp-container {
    li {
      min-width: 100px;
      margin: 0 30px;
      color: $mainColor;
      font-size: 16px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    > .el-submenu {
      transition: all 0.5s;
      background: $linearG;
      border-bottom: none;
      color: #fff;
      border-radius: 20px;
      &.is-active {
        .el-submenu__title {
          color: #fff;
        }
      }
      .el-submenu__title {
        height: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: none;
        color: $mainColor;
        border-radius: 20px;
        transition: all 0.3s;
        &:hover {
          background-color: transparent;
          color: #fff;
        }
        > i {
          margin-top: 2px;
          color: #fff;
        }
      }
    }
    > .el-menu-item {
      height: 35px;
      border: none;
      background: $linearG;
      color: $mainColor;
      border-radius: 20px;
      transition: all 0.3s;
      &.is-active {
        color: #fff;
      }
    }
    > .el-menu-item:not(.is-active):hover {
      color: $mainColor;
    }
  }
  .project-title {
    padding: 10px;
    position: relative;
    height: 33px;
    text-align: center;
    line-height: 30px;
    color: #fff;
    font-size: 22px;
  }
  .user-info {
    position: absolute;
    right: 10px;
    height: 50px;
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 12px;
    > div {
      margin: 0 10px;
      &.corpName {
        max-width: 300px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .line {
      color: $mainColor;
    }
    .message {
      width: 20px;
      height: 100%;
      display: flex;
      align-items: center;
      color: #fff;
      i {
        cursor: pointer;
        transition: color 100ms;
        position: relative;
        color: $mainColor;
        &:hover {
          color: $lightBtnBg;
        }
        span {
          position: absolute;
          display: inline-block;
          color: #fff;
          background-color: #e22323;
          border-radius: 10px;
          font-size: 12px;
          top: -14px;
          right: -14px;
          width: 28px;
          height: 18px;
          transform: scale(0.8);
          text-align: center;
          line-height: 18px;
        }
      }
    }
    .user-item {
      background-color: rgba(160, 164, 179, 0.4);
      padding: 2px 4px;
      border-radius: 3px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      transition: color 100ms;
      &.user-item-name {
        background-color: transparent;
      }
      &:hover {
        color: $lightBtnBg;
        i,
        .iconyonghu {
          color: $lightBtnBg;
        }
      }
      i {
        font-size: 14px;
        margin-right: 3px;
        color: $mainColor;
        &.iconyonghu {
          font-size: 12px;
          color: #fff;
        }
      }
      .user-name {
        max-width: 50px;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    /deep/ .el-dropdown {
      color: #fff;
    }
  }
}
</style>
